<template>
    <div class="message">
        <el-button type="primary" @click="messageTypeAdd">添加类型</el-button>
        <el-table
                :data="messagesTypes"
                style="width: 100%">
            <el-table-column
                    label="消息类型名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.typeName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button><br />
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                center>
            <el-form :model="messagesType" label-width="100px" class="demo-ruleForm">
                <el-form-item label="类型名称" prop="name">
                    <el-input v-model="messagesType.typeName"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="formSubmit">确 定</el-button>
          </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "MessageType",
        data(){
            return {
                messagesTypes : [],
                messagesType:{},
                dialogVisible : false,
                isAdd : null,
            }
        },
        created() {
            this.getMessageType();
        },
        methods: {
            getMessageType(){
                this.$api.messageType.getAll().then(res => {
                    this.messagesTypes = res.data;
                });
            },

            messageTypeAdd(){
                this.isAdd = true;
                this.messagesType = {}
                this.dialogVisible = true;
            },
            handleDelete(id , obj){
                this.$confirm('确定要删除该类型吗?','提示',{
                    confirmButtonText : '确定',
                    cancelButtonText : '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.messageType.messageTypeDelete(obj.id)
                        .then(res => {
                            console.log(res);
                            this.$message.success('删除成功');
                            this.getMessageType();
                        });
                }).catch(() => {
                    this.$message.success('已取消');
                })
            },
            handleEdit(id , obj){
                this.dialogVisible=true;
                this.messagesType = {...obj};
                this.isAdd = false;
            },
            formSubmit(){
                if (this.isAdd === null) return this.$message.error('错误操作');
                if (this.isAdd){
                    this.$api.messageType.messageTypeAdd(this.messagesType)
                        .then(() => {
                            this.$message.success('添加成功!');
                            this.dialogVisible = false;
                            this.getMessageType();
                        })
                }else{
                    console.log(this.message);
                    this.$api.messageType.messageTypePatch(this.messagesType.id , this.messagesType)
                        .then(() => {
                            this.$message.success('修改成功!');
                            this.dialogVisible = false;
                            this.getMessageType();
                        })
                }
            }
        }
    }
</script>

<style scoped>

</style>
